<template>
	<view class="bodys">
		<view class="scroll_box" id="scroll_box">
			<scroll-view scroll-y='true' class="left_box" :scroll-into-view="leftIntoView">
				<view class="left_item" v-for="(item,i) in leftArray" :key='i' @click="onLeft" :data-index="i"
					:id="'left-'+i" :class="{select:i == leftIndex}">
					{{item}}
				</view>
			</scroll-view>
			<scroll-view @scroll="mainScroll" :scroll-into-view="scrollInto" scroll-y='true' class="right_box"
				scroll-with-animation="true">
				<slot></slot>
				<view class="right_item" v-for="(item,i) in rightArray" :key='i' :id="'item-'+i">
					<view class="rigth_title">
						<text class="rigth_titlezi">{{item.title}}</text>
					</view>
					<view class="lis">
						<!-- {{item.content}} -->
						<view v-if="i==0" v-for="(items,j) in item.content" class="lis_item"
							@click="gotopage(items.url,items.id)">
							<image :src="items.icon" style="width: 30px;height: 30px;"></image>
							<view class="lis_item_zi">{{items.title}}
							</view>
						</view>
						<view v-if="i!=0" v-for="(items,j) in item.content" class="lis_item"
							@click="gotopage2(items.url)">
							<image :src="items.icon" style="width: 30px;height: 30px;"></image>
							<view class="lis_item_zi">{{items.title}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="right_item" id="item-0">
					<view class="rigth_title">
					q
					</view>
					<view class="lis" :key='0'>
						w
					</view>
				</view>
				<view class="right_item" id="item-1">
					<view class="rigth_title">
					q
					</view>
					<view class="lis" :key='0'>
						w
					</view>
				</view> -->
				<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "side-navigation",
		data() {
			return {
				leftArray: [],
				rightArray: [],
				scrollHeight: 400,
				scrollInto: "",
				leftIndex: 0,
				topArr: [],
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
			}
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
				//return `left-${this.leftIndex}`;	//根据实际情况
			}
		},
		mounted() {
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						this.$nextTick(() => {
							this.getElementTop();
						});
						/* 获取列表数据，你的代码从此处开始 */
						// this.getListData(); //根据实际情况  用时换成自己的或注释
					});
				}, 200);
			});
		},
		onShow(){
			this.leftArray = [
					this.$t('service.fuwu'),this.$t('service.banli'),this.$t('service.jiaofei'),  this.$t('service.qita')
				];
			this.rightArray = [{
						"title": this.$t('service.fuwu'),
						content: [{
								id: 1,
								"icon": "../../static/icon/bgmusic2.png",
								"title": this.$t('service.tonghua'),
								"url": "./bgmusic"
							},
							{
								id: 2,
								"icon": "../../static/icon/weijie2.png",
								"title": this.$t('service.weijie'),
								"url": "./bgmusic"
							},
							{
								id: 3,
								"icon": "../../static/icon/biansheng.png",
								"title": this.$t('service.biansheng'),
								"url": "./bgmusic"
							},
							{
								id: 4,
								"icon": "../../static/icon/caipiao2.png",
								"title": this.$t('service.caipiao'),
								"url": "./bgmusic"
							},
							{
								id: 5,
								"icon": "../../static/icon/cailing.png",
								"title": this.$t('service.cailing'),
								"url": "./bgmusic"
							},
							{
								id: 6,
								"icon": "../../static/icon/huilv2.png",
								"title": this.$t('service.huilv'),
								"url": "./bgmusic"
							},
							{
								id: 7,
								"icon": "../../static/icon/zazhi2.png",
								"title": this.$t('service.zazhi'),
								"url": "./bgmusic"
							}
							
						]
					},
					{
						"title":this.$t('service.banli'),
						content: [{
								id: 1,
								"icon": "../../static/icon/simka2.png",
								"title": this.$t('service.SIM'),
								"url": "./simka"
							},
							{
								id: 2,
								"icon": "../../static/icon/architecture.png",
								"title": this.$t('service.huafeizhuanhui'),
								"url": "./teltransfer"
							},
							{
								id: 3,
								"icon": "../../static/icon/flow.png",
								"title":this.$t('service.flow'),
								"url": "./flow"
							},
							{
								id: 4,
								"icon": "../../static/icon/WIFI.png",
								"title": this.$t('service.WIFI'),
								"url": "./buywifi"
							}, 
							// {
							// 	id: 5,
							// 	"icon": "../../static/icon/contact.png",
							// 	"title": this.$t('service.haiwaiphone'),
							// 	"url": "./bgmusic"
							// },
							{
								id: 6,
								"icon": "../../static/icon/youtube.png",
								"title": this.$t('service.youtube'),
								"url": "./youtube"
							},
						]
					},
					{
						"title": this.$t('service.jiaofei'),
						content: [{
								id: 1,
								"icon": "../../static/icon/chongzhi2.png",
								"title":this.$t('service.chongzhi'),
								"url": "./recharge"
							},
							{
								id: 2,
								"icon": "../../static/icon/tarendinggou.png",
								"title": this.$t('service.tarendinggou'),
								"url": "./otherservice"
							}
						]
					},
					// {
					// 	"title": "游戏",
					// 	content: [{
					// 		id: 1,
					// 		"icon": "../../static/icon/game.png",
					// 		"title": this.$t('service.game'),
					// 		"url": "./bgmusic"
					// 	}]
					// },
					{
						"title": this.$t('service.qita'),
						content: [
							// {
							// 	id: 1,
							// 	"icon": "../../static/icon/toupiao.png",
							// 	"title": this.$t('service.toupiao'),
							// 	"url": "./bgmusic"
							// },
							{
								id: 2,
								"icon": "../../static/icon/luyou2.png",
								"title": this.$t('service.ADSL'),
								"url": "./ADSL"
							},
							{
								id: 3,
								"icon": "../../static/icon/historyzd2.png",
								"title": this.$t('historyzd.title'),
								"url": "./historyzd"
							}
						]
					}
				];
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll_box');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height; //根据实际情况来赋值
						this.$nextTick(() => {
							resolve();
						});
					}).exec();
				});
			},
			// 获取元素顶部信息
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.right_item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;

					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 20;
					}
				});
			},
			// 点击左侧导航
			onLeft(e) {
				const index = e.currentTarget.dataset.index;
				// this.leftIndex = index
				this.scrollInto = `item-${index}`
			},
			// 右侧滑动
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top + 22 >= this.topArr[i]) {
						index = i;
						break;
					}

				}
				this.leftIndex = index < 0 ? 0 : index;
			},
			gotopage(a, id) { //服务里的跳转界面 需要传递一个参数
				uni.navigateTo({
					url: a + "?id=" + id
				})
			},
			gotopage2(a) {
				uni.navigateTo({
					url: a 
				})
			}
		},

	}
</script>

<style>
	page,
	.bodys {
		height: 100%;

	}

.bodys{
	/* padding-top: 20px; */
}
	.scroll_box {
		display: flex;
		height: 100%;

	}

	.left_box {
		width: 20%;
		height: 100% !important;
	}

	.left_box {
		width: 20%;
		height: 100% !important;
		/* background-color: #1eb9ee; */
			background-color: #DEE1E6;
		/* padding-top: 20px; */

	}
	
	
	.right_box {
		padding-top: 20px;
	
	}

	.left_item {
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		border-bottom: 1px white solid;
	
	}
	.left_item:first-child {
		padding-top: 20px;
	
	}

	.lis {
		/* height: 200rpx; */
		border-radius: 10rpx;
		/* background: #808080; */
		color: #FFFFFF;
		text-align: center;
		line-height: 200rpx;
		margin-bottom: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.lis_item {
		/* border: 1px red solid; */
		width: 30%;
		margin-left: 5px;
		margin-top: 5px;
		height: 100px;
		position: relative;
	}

	.lis_item_zi {
		font-size: 12px;
		color: black;
		position: absolute;
		top: 30px;
		text-align: center;
		width: 100%;
	}

	.select {
		background-color: white;
	}

	.rigth_title {
		height: 30px;
		text-align: center;
		border-bottom: 1px gray solid;
		margin-bottom: 20px;
		width: 70%;
		margin-left: 15%;
	}

	.rigth_titlezi {
		position: relative;
		background-color: white;
		top: 20px;
	}
</style>